<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../../../src/css/common/reset.css">
    <link rel="stylesheet" href="com-menu.css">
    <script src="../../lib/jquery.js"></script>
    <script src="com-menu.js"></script>
</head>
<body>

<div class="demo clearfix">

    <section id="menu-a" class="com-menu">
        <section data-name="menuItem" class="menu-item">
            <div data-name="menuList" class="item-list">
                <div data-name="menuTitle" class="list-title">
                    <i></i><span>menu1</span>
                </div>
                <ul data-name="menuContent" class="list-content ml30">
                    <li data-name="menuText" data-val="test">content.s..</li>

                    <li data-name="menuList" class="item-list">
                        <div data-name="menuTitle" class="list-title"><i></i>menu1-child1</div>
                        <div data-name="menuContent" class="list-content">menu1-content</div>
                    </li>

                    <li data-name="menuList" class="item-list">
                        <div data-name="menuTitle" class="list-title">
                            <i>@</i><span>menu2</span>
                        </div>
                        <ul data-name="menuContent" class="list-content">
                            <li data-name="menuText" class="item-list">123123</li>

                            <li data-name="menuList" class="item-list">
                                <div data-name="menuTitle" class="list-title">
                                    <i></i><span>menu1</span>
                                </div>
                                <div data-name="menuContent" class="list-content">
                                    <p data-name="menuText" data-val="a1">content.s..</p>
                                    <p data-name="menuText">content..w.</p>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>

            <div data-name="menuList" class="item-list">
                <div data-name="menuTitle" class="list-title">
                    <i>@</i><span>menu2</span>
                </div>
                <div data-name="menuContent" class="list-content">
                    <p data-name="menuText" data-val="a1">content.s..</p>
                    <p data-name="menuText">content..w.</p>
                    <p data-name="menuText">content.e..</p>
                    <p data-name="menuText">content..f.</p>
                </div>
            </div>
        </section>
    </section>

</div>

<script>

    /**
     * @必须拥有包含menuItem属性的父级
     * @shrink : true的模式开启tree型结构否则为一般导航菜单
     * @i标签专为树形标签提供的箭头
     **/
    $("#menu-a").comMenu({
        //shrink:true
    });

</script>
</body>
</html>